<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/dist/css/AdminLTE.min.css">
  <!-- DataTables style -->
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
  <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
        page. However, you can choose any other skin. Make sure you
        apply the skin class to the body tag so the changes take effect. -->
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/dist/css/skins/skin-blue.min.css">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="<%=request.getContextPath() %>/styles/plugins/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="<%=request.getContextPath() %>/styles/plugins/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<title>Insert title here</title>
</head>
<body>
<div class="container">
    <form action="#">
        <div class="form-group">
             <label for="exampleInputName2">填写用户名</label>
             <input id="user" type="text" class="form-control" id="exampleInputName2" placeholder="User name">
        </div>
        <div class="form-group">
             <label for="examplePasswordName2">填写密码</label>
             <input id="pwd" type="password" class="form-control" id="examplePasswordName2" placeholder="Password">
        </div>
        <button id="submitCtl" type="submit" class="btn btn-default">新建用户</button>
    </form>
</div>
    <!-- jQuery 3 -->
<script src="<%=request.getContextPath() %>/styles/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="<%=request.getContextPath() %>/styles/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- JQuery Slimscroll -->
<script src="<%=request.getContextPath() %>/styles/bower_components/jquery-slimscroll/jquery.slimscroll.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    	$("#submitCtl").on("click",function(e){
    		e.preventDefault();
    		var sendObj = {};
    		sendObj.userName = $("#user").val();
    		sendObj.userPwd = $("#pwd").val();
    		$.ajax({
    			url: "<%=request.getContextPath() %>/index/user/add/commit",
    			method: "POST",
    			dataType: "json",
    			data: sendObj,
    			success: function(res){
    				console.log(res);
    				alert("返回状态："+res.status);
    			}
    		});
    	});
    });
</script>
</body>
</html>